<template>
  <div id="cInputAndCheck">
    {{per}} <input style="width:50px; border:0px solid #000; text-align:center;" :value="value" @input="change" />
    {{suf}}
    <input type="checkbox" @input="checkChange" :checked="checked" />{{check}}
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: undefined,
    },
    per: {
      type: String,
      default: '',
    },
    suf: {
      type: String,
      default: '',
    },
    check: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    change(e) {
      this.$emit('input', e.target.value)
    },
    checkChange() {
      this.$emit('input', '')
    },
  },
}
</script>

<style lang="scss" scoped>
#cInputAndCheck {
  width: 100%;
  height: 50px;
  border: 1px solid black;

  .item {
    padding-right: 10px;
  }
}
</style>

